<!doctype html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>天然橡胶网|www.yunken.com - 用户注册</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="keywords" content="天然橡胶网|www.yunken.com"/>
    <meta name="description" content="天然橡胶网|www.yunken.com"/>
    <style type="text/css">
        body {
            _behavior: url(__PUBLIC__/static/shop/css/csshover.htc);
        }
    </style>
    <link href="__PUBLIC__/static/shop/css/base.css" rel="stylesheet" type="text/css">
    <link href="__PUBLIC__/static/shop/css/home_header.css" rel="stylesheet" type="text/css">
    <link href="__PUBLIC__/static/shop/css/member_login.css" rel="stylesheet" type="text/css">
    <link href="__PUBLIC__/static/shop/font/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <!--[if IE 7]>
    <link rel="stylesheet" href="__PUBLIC__/static/data/font/font-awesome/css/font-awesome-ie7.min.css">
    <![endif]-->
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="__PUBLIC__/static/data/js/html5shiv.js"></script>
    <script src="__PUBLIC__/static/data/js/respond.min.js"></script>
    <![endif]-->
    <script>
        var COOKIE_PRE = 'FCB8_';
        var _CHARSET = 'utf-8';
        var SITEURL = 'http://shop.yunken.cc/shop';
        var SHOP_SITE_URL = 'http://shop.yunken.cc/shop';
        var RESOURCE_SITE_URL = '__PUBLIC__/static/data';
        var RESOURCE_SITE_URL = '__PUBLIC__/static/data';
        var SHOP_TEMPLATES_URL = '__PUBLIC__/static/shop';
    </script>
    <script src="__PUBLIC__/static/data/js/jquery.js"></script>
    <script src="__PUBLIC__/static/data/js/jquery-ui/jquery.ui.js"></script>
    <script src="__PUBLIC__/static/data/js/common.js"></script>
    <!--<script src="__PUBLIC__/static/data/js/jquery.validation.min.js"></script>-->
    <!--<script src="__PUBLIC__/static/data/js/dialog/dialog.js" id="dialog_js"></script>-->
    <script src="__PUBLIC__/static/shop/js/taglibs.js"></script>
    <script src="__PUBLIC__/static/shop/js/tabulous.js"></script>
</head>
<body>
<div class="header-wrap">
    <header class="public-head-layout wrapper">
        <h1 class="site-logo">
            <a href="/">
                <img src="{:sysconf('site_logo')}" class="pngFix">
            </a>
        </h1>
        <div class="nc-login-now">我已经注册，现在就<a href="{:url('/home/Login/index')}"
                title="" class="register">登录</a>
        </div>
    </header>
</div>
<!-- PublicHeadLayout End -->
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="nc-register-bg">
    <div class="nc-register-box">
        <div class="nc-register-layout">
            <div class="left">
                <div class="nc-register-mode">
                    <ul class="tabs-nav" style="display:none;">
                        <li><a href="#default">账号注册<i></i></a></li>
                        <li><a href="#mobile">手机注册<i></i></a></li>
                    </ul>
                    <!--<div id="tabs_container" class="tabs-container"> -->
                    <div class="tabs-container">

                        <div id="mobile" style="margin-top:100px;">
                            <form style="display: block;" id="post_form" method="post" class="nc-login-form layui-form" action="">

                                <dl>
                                    <dt>手机号：</dt>
                                    <dd>
                                        <input type="text" class="text" placeholder="请输入手机号码" autocomplete="off" value="" name="phone" lay-verify="phone" id="phone">
                                    </dd>
                                </dl>
                                <div class="code-div">
                                    <dl>
                                        <dt>验证码：</dt>
                                        <dd>
                                            <input type="text" name="captcha" class="text w100" id="image_captcha" size="10" placeholder="输入验证码" lay-verify="captcha"/>
                                        </dd>
                                    </dl>
                                    <span>
                                        <img style="cursor: pointer; vertical-align: top;" onclick="this.src+='?rand='+Math.random();" src="{:url('verify_code')}" title="看不清？单击此处刷新" alt="captcha" />
                                    </span>
                                </div>
                                <div class="tiptext" id="sms_text">确保上方验证码输入正确，点击<span>
                                    <a href="javascript:void(0);" onclick="get_sms_captcha()"><i class="icon-mobile-phone"></i>发送短信验证</a></span>，并将您手机短信所接收到的“6位验证码”输入到下方短信验证，再提交下一步。
                                </div>
                                <dl>
                                    <dt>短信验证：</dt>
                                    <dd>
                                        <input type="text" name="sms_captcha" autocomplete="off" placeholder="输入6位短信验证码" class="text" id="sms_captcha" size="15" lay-verify="sms_captcha"/>
                                    </dd>
                                </dl>
                                <div class="submit-div">
                                    <input type="button" id="submitBtn" class="submit" lay-submit="" lay-filter="ajax_register_step1" value="下一步">
                                </div>
                            </form>
                            <form style="display: none;" id="register_sms_form" class="nc-login-form layui-form" method="post" action="">

                                <input type="hidden" name="register_sms_captcha" id="register_sms_captcha" value=""/>
                                <input type="hidden" name="register_phone" id="register_phone" value=""/>
                                <dl>
                                    <dt>用户名：</dt>
                                    <dd>
                                        <input type="text" id="member_name" name="member_name" class="text w150" value="" lay-verify="username"/>
                                    </dd>
                                    <span class="note">系统生成随机用户名，可选择默认或自行修改一次。</span>
                                </dl>
                                <dl>
                                    <dt>设置密码：</dt>
                                    <dd>
                                        <input type="text" id="sms_password" name="password" class="text w150" value="" lay-verify="password"/>
                                    </dd>
                                    <span class="note">系统生成随机密码，请牢记或修改为自设密码。</span>
                                </dl>
                                <dl class="mt15">
                                    <dt>邮箱：</dt>
                                    <dd>
                                        <input type="text" id="sms_email" name="email" class="text" value="" placeholder="输入常用邮箱作为验证及找回密码使用"/>
                                    </dd>
                                </dl>
                                <dl class="clause-div">
                                    <dd>
                                        <input name="agree" type="checkbox" class="checkbox" id="sms_clause" value="1" checked="checked"/>
                                        阅读并同意<a href="" target="_blank" class="agreement" title="阅读并同意">《服务协议》</a>
                                    </dd>
                                </dl>
                                <div class="submit-div">
                                    <input type="button" value="提交注册" class="submit" lay-submit="" lay-filter="ajax_register_finish" title="提交注册"/>
                                    <input type="hidden" value="{$output.ref_url}" name="ref_url">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="reister-after">
                    <h4>注册之后您可以</h4>
                    <ol>
                        <li class="ico01"><i></i>购买商品支付订单</li>
                        <li class="ico02"><i></i>收藏商品关注店铺</li>
                        <li class="ico03"><i></i>安全交易诚信无忧</li>
                        <li class="ico04"><i></i>积分获取优惠购物</li>
                        <li class="ico05"><i></i>会员等级享受特权</li>
                        <li class="ico06"><i></i>评价晒单站外分享</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>




<!-- layer 3.0 -->
<script src="__PUBLIC__/static/plugs/layer/layer.js"></script>

<!-- layui 2.0-->
<link rel="stylesheet" href="__PUBLIC__/static/plugs/layui/css/layui.css">
<script src="__PUBLIC__/static/plugs/layui/layui.js"></script>

<!-- popup js -->
<script language="javascript" src="__PUBLIC__/static/home/js/common/popup.js" type="text/javascript"></script>




<!--<script type="text/javascript" src="http://shop.yunken.cc/shop/resource/js/connect_sms.js" charset="utf-8"></script>-->
<script>
//    $(function () {
//        $("#submitBtn").click(function () {
//            if ($("#post_form").valid()) {
//                check_captcha();
//            }
//        });
//        $("#post_form").validate({
//            errorPlacement: function (error, element) {
//                var error_td = element.parent('dd');
//                error_td.append(error);
//                element.parents('dl:first').addClass('error');
//            },
//            success: function (label) {
//                label.parents('dl:first').removeClass('error').find('label').remove();
//            },
//            onkeyup: false,
//            rules: {
//                phone: {
//                    required: true,
//                    mobile: true
//                },
//                captcha: {
//                    required: true,
//                    minlength: 4,
//                    remote: {
//                        url: 'index.php?act=seccode&op=check&nchash=73693c18',
//                        type: 'get',
//                        data: {
//                            captcha: function () {
//                                return $('#image_captcha').val();
//                            }
//                        },
//                        complete: function (data) {
//                            if (data.responseText == 'false') {
//                                document.getElementById('sms_codeimage').src = 'index.php?act=seccode&op=makecode&type=50,120&nchash=73693c18&t=' + Math.random();
//                            }
//                        }
//                    }
//                },
//                sms_captcha: {
//                    required: function (element) {
//                        return $("#image_captcha").val().length == 4;
//                    },
//                    minlength: 6
//                }
//            },
//            messages: {
//                phone: {
//                    required: '<i class="icon-exclamation-sign"></i>输入正确的手机号',
//                    mobile: '<i class="icon-exclamation-sign"></i>输入正确的手机号'
//                },
//                captcha: {
//                    required: '<i class="icon-remove-circle" title="请输入验证码"></i>',
//                    minlength: '<i class="icon-remove-circle" title="请输入验证码"></i>',
//                    remote: '<i class="icon-remove-circle" title="验证码不正确"></i>'
//                },
//                sms_captcha: {
//                    required: '<i class="icon-exclamation-sign"></i>请输入六位短信验证码',
//                    minlength: '<i class="icon-exclamation-sign"></i>请输入六位短信验证码'
//                }
//            }
//        });
//        $('#register_sms_form').validate({
//            errorPlacement: function (error, element) {
//                var error_td = element.parent('dd');
//                error_td.append(error);
//                element.parents('dl:first').addClass('error');
//            },
//            success: function (label) {
//                label.parents('dl:first').removeClass('error').find('label').remove();
//            },
//            submitHandler: function (form) {
//                ajaxpost('register_sms_form', '', '', 'onerror');
//            },
//            rules: {
//                member_name: {
//                    required: true,
//                    lettersmin: true,
//                    lettersmax: true,
//                    letters_name: true,
//                    remote: {
//                        url: 'index.php?act=login&op=check_member&column=ok',
//                        type: 'get',
//                        data: {
//                            user_name: function () {
//                                return $('#member_name').val();
//                            }
//                        }
//                    }
//                },
//                password: {
//                    required: true,
//                    minlength: 6,
//                    maxlength: 20
//                },
//                email: {
//                    email: true,
//                    remote: {
//                        url: 'index.php?act=login&op=check_email',
//                        type: 'get',
//                        data: {
//                            email: function () {
//                                return $('#sms_email').val();
//                            }
//                        }
//                    }
//                },
//                agree: {
//                    required: true
//                }
//            },
//            messages: {
//                member_name: {
//                    required: '<i class="icon-exclamation-sign"></i>用户名不能为空',
//                    lettersmin: '<i class="icon-exclamation-sign"></i>用户名必须在3-15个字符之间',
//                    lettersmax: '<i class="icon-exclamation-sign"></i>用户名必须在3-15个字符之间',
//                    letters_name: '<i class="icon-exclamation-sign"></i>可包含“_”、“-”，不能是纯数字',
//                    remote: '<i class="icon-exclamation-sign"></i>该用户名已经存在'
//                },
//                password: {
//                    required: '<i class="icon-exclamation-sign"></i>密码不能为空',
//                    minlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间',
//                    maxlength: '<i class="icon-exclamation-sign"></i>密码长度应在6-20个字符之间'
//                },
//                email: {
//                    email: '<i class="icon-exclamation-sign"></i>这不是一个有效的电子邮箱',
//                    remote: '<i class="icon-exclamation-sign"></i>该电子邮箱已经存在'
//                },
//                agree: {
//                    required: '<i class="icon-exclamation-sign"></i>请勾选服务协议'
//                }
//            }
//        });
//    });
</script>

<script>
    function get_sms_captcha(){
        if($("#phone").val().length == 11){
//            document.getElementById('codeimage').src='index.php?act=seccode&op=makecode&type=50,120&nchash=$("#register_sms_captcha").val()&t=' + Math.random();
//            var ajaxurl = 'index.php?act=connect_sms&op=get_captcha&nchash=1&type='+type;
//            ajaxurl += '&captcha='+$('#image_captcha').val()+'&phone='+$('#phone').val();
            $.ajax({
                type: "GET",
                url: '/home/Login/sendSms?mobile=' + $('#phone').val(),
                async: false,
                success: function(res){
                    if(res.code == 200) {
                        $("#sms_text").html('短信验证码已发出');
                    } else {
                        layer.alert(res.message, {
                            icon: 2
                            ,skin: 'layer-ext-moon'
                            ,time: 2000
                        })

                    }
                }
            });
        }
    }
</script>

<script>
    layui.use(['form'], function() {
        var form = layui.form;

        //自定义验证规则
        form.verify({
            username: function(value){
                if(value.length < 1){
                    return '登录账号不能为空';
                }
            },
            password: function(value){
                if(value.length < 1){
                    return '密码不能为空';
                }
            },
            captcha: function(value){
                if(value == '输入验证码'){
                    return '验证码不能为空';
                }
                if(value.length < 4){
                    return '验证码至少为4位';
                }
            },

            sms_captcha: function(value){
                if(value.length < 6){
                    return '手机验证码至少为6位';
                }
            }
        });

        // ajax 提交
        form.on('submit(ajax_register_step1)', function(data){

            data.field.register_step = 'step1';
            $.post('/home/Login/registerStep1',data.field,function(res){
                if (res.code == 1){
                    // 第一步验证成功 进入下一步
//                    layer.alert(res.message, {
//                        title: '提示信息'
//                        ,icon: 1
//                        ,skin: 'layer-ext-moon'
//                        ,time: 1000
//                        ,end: function () {
//                            // 回调函数
//                            $("#post_form").hide();
//                            $("#register_sms_form").show();
//                        }
//                    })
                    $("#post_form").hide();
                    $("#register_sms_form").show();
                    console.log(data.field);
                    $("#register_sms_captcha").val(data.field.sms_captcha);
                    $("#register_phone").val(data.field.phone);
                }else {
                    layer.msg(res.msg, {
                        icon: 2,
                        skin: 'layer-ext-moon'
                    })
                }

            });
            return false;
        });

        form.on('submit(ajax_register_finish)', function(data){
            data.field.register_step = 'finish';
            $.post('/home/Login/registerFinish',data.field,function(res){

//                console.log(data.field);
                if (res.code == 1){
                    popup_jump(res, 1);
                }else {
                    layer.msg(res.msg, {
                        icon: 2,
                        skin: 'layer-ext-moon'
                    })
                }

            });
            return false;
        });
    });
</script>



<!-- footer-->
{include file="common/footer"}

</body>
</html>
